<template>
    <el-form
      ref="ruleFormRef"
      style="max-width: 600px"
      :model="ruleForm"
      :rules="rules"
      label-width="auto"
      class="demo-ruleForm"
      :size="formSize"
      status-icon
    >
      <el-form-item label="用户名称" prop="U_LoginName">
        <el-input v-model="ruleForm.U_LoginName" />
      </el-form-item>
      <el-form-item label="用户密码" prop="U_LoginPwd">
        <el-input type="password" v-model="ruleForm.U_LoginPwd" />
      </el-form-item>
      <el-form-item label="真实姓名" prop="U_TrueName">
        <el-input v-model="ruleForm.U_TrueName" />
      </el-form-item>
      <el-form-item label="性别" prop="U_Sex">
        <el-radio-group v-model="ruleForm.U_Sex">
          <el-radio :value="true">男</el-radio>
          <el-radio :value="false">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="出生日期" required>
        <el-col :span="11">
          <el-form-item prop="U_Birthday">
            <el-date-picker
              v-model="ruleForm.U_Birthday"
              type="date"
              aria-label="Pick a date"
              placeholder="请选择出生日期"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item label="状态" prop="U_State">
        <el-radio-group v-model="ruleForm.U_State">
          <el-radio :value="0">正常</el-radio>
          <el-radio :value="1">冻结</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="角色" prop="Role_Id">
      <el-checkbox-group v-model="ruleForm.Role_Id">
        <el-checkbox v-for="item in Roleinfo" :value="item.Role_Id">
            {{ item.Role_Name }}
        </el-checkbox>

      </el-checkbox-group>{{ ruleForm.Role_Id }}
    </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)">
          保存
        </el-button>
        <el-button @click="resetForm(ruleFormRef)">重置</el-button>
      </el-form-item>
    </el-form>
  </template>
  
  <script lang="ts" setup>
  import { onMounted, reactive, ref } from 'vue'
  import { ElMessage, type ComponentSize, type FormInstance, type FormRules } from 'element-plus'
  import axios from 'axios'
  
  //生命周期函数钩
  onMounted(()=>{
    LoadRole()
  })


  
  const formSize = ref<ComponentSize>('default')
  const ruleFormRef = ref<FormInstance>()
  const ruleForm = reactive({
    U_LoginName: '',
    U_LoginPwd: '',
    U_TrueName: '',
    U_Sex: true,
    U_Birthday: '',
    U_State: 0,
    Role_Id:[]
  })
  //验证
  const rules = reactive<FormRules>({
    U_LoginName: [
      { required: true, message: '请输入用户账号', trigger: 'blur' },
      { min: 5, message: '长度最少5个字符', trigger: 'blur' },
    ],
    U_LoginPwd: [
      { required: true, message: '请输入用户密码', trigger: 'blur' },
      { min: 6, message: '长度最少6个字符', trigger: 'blur' },
    ],
    U_TrueName: [
      { required: true,  message: '请输入真实姓名', trigger: 'blur', },
    ],
    U_Sex: [
      {  required: true, message: '请选择性别', trigger: 'change', },
    ],
    U_Birthday: [
      { type: 'date', required: true,  message: '请选择出生日期', trigger: 'change', },
    ],
    U_State: [
      { required: true, message: '请选择状态', trigger: 'change', },
    ],
    Role_Id: [
      { type: 'array', required: true, message: '至少选择一个角色', trigger: 'change', },
  ],
  })
    //创建响应式数据保存角色信息
    const Roleinfo=ref([{
    Role_Id:0,
    Role_Name:''
  }])
  //加载角色
  const LoadRole=()=>{
    axios.get("/api/User/GetRoles")
    .then(res=>{
        Roleinfo.value=res.data.Data
    })
    .catch(error=>{
        console.log(error)
    })
  }
  const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
      if (valid) {
        console.log('submit!')
        axios.post("/api/User/AddUser",ruleForm,{
          params:{
            roles:ruleForm.Role_Id.toString()
          }
        })
        .then(res=>{
            console.log()
            if(res.data.Data>0){
                ElMessage.success("添加成功")
            }else if(res.data.Data==-1){
                ElMessage.warning("名称已存在")
            }else{
                ElMessage.error("添加失败")
            }
        })
      } else {
        console.log('error submit!', fields)
      }
    })
  }
  
  const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
  }
  
  const options = Array.from({ length: 10000 }).map((_, idx) => ({
    value: `${idx + 1}`,
    label: `${idx + 1}`,
  }))
  </script>
  